<template>
  <div class="homepage">
    <div class="nav_title">
      <h1 class="nav_title_content"><i class="el-icon-orange"> OASYS</i></h1>
    </div>
    <div class="nav_module">
      <div class="detail">
        <div class="detail_pic"><img src="" title="..."></div>
        <div class="detail_state">
          <p>{Name}</p>
          <p class="el-icon-help"><span style="color: white;"> 在线</span></p>
        </div>
        <el-select v-model="value" class="search" multiple filterable remote reserve-keyword
          placeholder="查找"
          :remote-method="remoteMethod"
          :loading="loading" style="color: white;">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
        </el-select>
      </div>
      <el-menu
        class="nav"
        @open="handleOpen"
        @close="handleClose"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-user-solid"></i>
            <span slot="title">用户管理</span>
          </template>
          <el-menu-item-group>
            <router-link to="/findMessageOnly" class="findMessageOnly" name="/findMessageOnly">
              <el-menu-item index="1-1">查 询 个 人 信 息</el-menu-item>
            </router-link>
            <router-link to="/findMessageAll" class="findMessageAll" name="/findMessageAll">
              <el-menu-item index="1-2">查 询 全 员 信 息</el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">部门管理</span>
          </template>
          <el-menu-item-group>
            <router-link to="/departmentManage" class="departmentManage" name="/departmentManage">
              <el-menu-item index="2-1">部门管理</el-menu-item>
            </router-link>
            <router-link to="/positionManage" class="positionManage" name="/positionManage">
              <el-menu-item index="2-2">职位管理</el-menu-item>
            </router-link>
            <router-link to="/userManage" class="userManage" name="/userManage">
              <el-menu-item index="2-3">用户管理</el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">财务管理</span>
          </template>
          <el-menu-item-group>
            <router-link to="/reimbursement" class="reimbursement" name="/reimbursement">
              <el-menu-item index="3-1">费用报销</el-menu-item>
            </router-link>
            <router-link to="/flowOfMoney" class="flowOfMoney" name="/flowOfMoney">
              <el-menu-item index="3-2">资金流水</el-menu-item>
            </router-link>
            <router-link to="/fundInquiry" class="fundInquiry" name="/fundInquiry">
              <el-menu-item index="3-3">资金记录</el-menu-item>
            </router-link>
            <router-link to="/personIncome" class="personIncome" name="/personIncome">
              <el-menu-item index="3-4">个人收入明细</el-menu-item>
            </router-link>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">考勤管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1">选项1</el-menu-item>
            <el-menu-item index="4-2">选项2</el-menu-item>
            <el-menu-item index="4-3">选项3</el-menu-item>
            <el-menu-item index="4-4">选项1</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">文档管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1">选项1</el-menu-item>
            <el-menu-item index="5-2">选项2</el-menu-item>
            <el-menu-item index="5-3">选项3</el-menu-item>
            <el-menu-item index="5-4">选项1</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">公告管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="6-1">选项1</el-menu-item>
            <el-menu-item index="6-2">选项2</el-menu-item>
            <el-menu-item index="6-3">选项3</el-menu-item>
            <el-menu-item index="6-4">选项1</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="7">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">系统设置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="7-1">选项1</el-menu-item>
            <el-menu-item index="7-2">选项2</el-menu-item>
            <el-menu-item index="7-3">选项3</el-menu-item>
            <el-menu-item index="7-4">选项1</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="8">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">通讯录</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="8-1">选项1</el-menu-item>
            <el-menu-item index="8-2">选项2</el-menu-item>
            <el-menu-item index="8-3">选项3</el-menu-item>
            <el-menu-item index="8-4">选项1</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="9">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <span slot="title">讨论区</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="9-1">选项1</el-menu-item>
            <el-menu-item index="9-2">选项2</el-menu-item>
            <el-menu-item index="9-3">选项3</el-menu-item>
            <el-menu-item index="9-4">选项1</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
      </el-menu>
      <div class="main_top">
        <ul>
          <li><router-link to="/" style="color:white;"><i class="el-icon-message-solid"></i></router-link></li>
          <li><router-link to="/" style="color:white;"><i class="el-icon-message"></i></router-link></li>
          <li><i class="el-icon-s-flag"></i></li>
          <li class="main_top_pic"><img src="" alt="..."></li>
          <li>{Name}</li>
        </ul>
      </div>
      <div class="main"> 
        <el-main>
          <router-view></router-view>
        </el-main>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData:[],
      valuedate: new Date(),
      options: [],
      value: [],
      list: [],
      loading: false,
      states: [
        "查询个人信息","注册","上传","下载"
      ]
    };
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.options = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1;
          });
        }, 200);
      } else {
        this.options = [];
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
  mounted(){
    // this.$router.push({name:"HomePageIndex"})
    this.$router.push({name:"FindMessageAll"})
        // this.$router.push({name:"FindMessageOnly"})
    // this.$router.push({name:"DepartmentManage"})
    // this.$router.push({name:"ReimburseMent"})
    // this.$router.push({name:"FlowOfMoney"})
    // this.$router.push({name:"PersonIncome"})    
    this.list = this.states.map(item => {
      return { value: `value:${item}`, label: `您要找的是:    ${item}` };
    });
  },
};
</script>

<style scoped>
*{
  margin: 0px;
  padding: 0px;
}
.main_top{
  /* background-color: hotpink; */
  position: absolute;
  top: -60px;
  left: 1220px;
  height: 60px;
  width: 300px;
}
.main_top ul{
  position: relative;
  /* background-color: #fe9c00; */
  width: 300px;
  height: 60px
}
.main_top ul li{
  position: relative;
  /* background-color: greenyellow; */
  list-style: none;
  color:rgb(255, 250, 250);
}
.main_top ul li:nth-child(1){
  position: relative;
  top: 18px;
  left: 85px;
}
.main_top ul li:nth-child(2){
  position: relative;
  top: -2px;
  left: 112px;
}
.main_top ul li:nth-child(3){
  position: relative;
  top: -23px;
  left: 140px;
}
.main_top ul li:nth-child(4){
  position: relative;
  top: -50px;
  left: 170px;
  width: 30px;
  height: 30px;
  border: 1px solid gray;
}
.main_top ul li:nth-child(5){
  position: relative;
  top: -75px;
  left: 210px;
}
.nav_title {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 60px;
  width: 1530px;
  background-color: #00c0ff;
  position: absolute;
  top: 0px;
}
.nav_title_content{
  position: absolute;
  width: 260px;
  height: 60px;
  line-height: 60px;
  color: white;
  font-size: 30px;
  text-align: center;
  background-color: hsl(196.17deg 100% 45.1%);
}
.nav_module{
  width: 260px;
  height: 690px;
  position: absolute;
  top: 60px;
  left: 0px;
  background-color: #1e2d34;
  /* overflow: auto; */
}
.detail{
  width: 260px;
  height: 130px;
  background-color: #1e2d34;
}
.detail_pic{
  width: 60px;
  height: 60px;
  position: relative;
  top: 20px;
  left: 10px;
  border: 2px solid rgb(223, 222, 221);
}
.detail_state{
  position: relative;
  top: -35px;
  left: 90px;
}
.detail_state p:nth-child(1){
  color: white;
}
.detail_state p:nth-child(2){
  font-size: 12px;
  color: rgb(23, 207, 47);
}
.search{
  width: 240px;
  position: relative;
  top: -18px;
  left: 8px;
}
.nav_switch{
  position: absolute;
  top: -50px;
  left: 270px;
  /* background-color: blue; */
}
.el-menu{
  background-color: #1e2d34;
}
.findMessageAll{
  text-decoration: none;
  text-align: center;
  font-weight: bold;
}
.findMessageOnly{
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}
.departmentManage{
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}
.positionManage{
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}
.userManage{
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}
.reimbursement{
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}
.flowOfMoney{
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}
.personIncome{
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}
.fundInquiry{
  text-align: center;
  text-decoration: none;
  font-weight: bold;
}
span{
  color: rgb(218, 214, 214);
}
.nav:not(.el-menu--collapse) {
  width: 260px;
  min-height: 400px;
}
.el-menu-item-group{
  background-color: rgb(189, 187, 187);
}
.main{
  width: 1274px;
  height: 700px;
  /* background-color: bisque; */
  position: absolute;
  top: 0px;
  left: 260px;
}

</style>